<template>
  <div class="my-2">
    <div ref="gridRef" class="border-t text-gray-950">
      <div class="border-l border-b border-r px-2">
        <!-- 送货清单 -->
        <div class="text-center font-bold" style="font-size: 30px;">{{form.template_name}}</div>
        <div class="flex mt-2 mb-1">
          <div class="ml-auto w-1/4">送货单号: {{ form.value.contact_no }}</div>
        </div>
      </div>

      
      <div class="grid border-l" style="grid-template-columns: repeat(20, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center">客户名称</div>
        <div class="border-b border-r p-2" style="grid-column: span 17 / span 17;">
        {{form.value.company_name}}
          <!-- <el-input v-if="edit" v-model="form.company_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.company_name }}</div> -->
        </div>
        <div class="col-span-3 border-b border-r p-2 flex items-center">客户地址</div>
        <div class="border-b border-r p-2" style="grid-column: span 17 / span 17;">
        {{form.value.company_address}}
          <!-- <el-input v-if="edit" v-model="form.supplier_name" placeholder="请输入" autosize />
          <div v-else style="min-height: 22px;" class="whitespace-pre-line">{{ form.supplier_name }}</div> -->
        </div>
      </div>
      <div class="grid border-l" style="grid-template-columns: repeat(15, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">供应商</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">采购单号</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">SKU</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">产品名称</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">数量</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">单位</div>
      </div>
      <div v-for="(d, i) in form.value.deliver_detail" :key="i" class="grid border-l"
        style="grid-template-columns: repeat(15, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">{{ d.supplier_name }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.purchase_no }}</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">{{ d.sku }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.invoice_name }}</div>
        <div class="col-span-3 border-b border-r p-2 flex items-center justify-center">{{ d.billing_num }}</div>
        <div class="col-span-2 border-b border-r p-2 flex items-center justify-center">{{ d.invoice_unit }}</div>
      </div>
      <div class="grid border-l" style="grid-template-columns: repeat(20, minmax(0, 1fr))">
        <div class="col-span-3 border-b border-r p-2 flex items-center">注意事项</div>
        <div class="border-b border-r p-2" style="grid-column: span 17 / span 17;">
          <div v-if="isLook" style="min-height: 22px;" class="whitespace-pre-line">{{ form.remark }}</div>
          <el-input v-else v-model="form.remark" placeholder="说明" type="textarea" autosize />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: Object, default: () => ({}) },
  isLook: Boolean,
  edit: Boolean,
})
const emit = defineEmits(['update:modelValue', 'load'])
const form = computed({
  get() {
    return props.modelValue || {}
  },
  set(val) {
    emit('update:modelValue', val)
  }
})

nextTick(() => {
  !props.edit && emit('load')
})
</script>